import 'package:flutter/material.dart';


//一级页面：通讯录
class Contact extends StatefulWidget {
  const Contact({Key? key}) : super(key: key);

  @override
  _ContactState createState() => _ContactState();
}

//挂载在Tabs中的Scaffold-body中，这儿需要第二个Scaffold,避免出现双导航栏，将TabBar写在title里
class _ContactState extends State<Contact> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Expanded(
                // flex: 1,
                child: TabBar(//配置TabBar菜单
                  // isScrollable: true,  tabs很多时可以滑动，而不是挤在一起
                  indicatorColor: Colors.red,
                  tabs: <Widget>[
                    Tab(text: '热门'),
                    Tab(text: '推荐'),
                    Tab(text: '关注'),
                  ],
                ),
              )
            ],
          ),
          // bottom: 因为双重Scaffold嵌套出现2个导航栏，所以直接 TabBar写title里，不要bottom属性
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(//对应第一个TabBar
              children: <Widget>[
                ListTile(title: Text("这是第一个 tab内容")),
                ListTile(title: Text("这是第一个 tab")),
              ],
            ),
            ListView(//对应第二个TabBar
              children: <Widget>[
                ListTile(title: Text("这是第二个 tab内容")),
                ListTile(title: Text("这是第二个 tab")),
              ],
            ),
            ListView(//对应第三个TabBar
              children: <Widget>[
                ListTile(title: Text("这是第三个 tab内容")),
                ListTile(title: Text("这是第三个 tab")),
              ],
            )
          ],
        ),
      ),
    );
  }
}
